/***
 * 思路：
 * 1.得到需要操作的元素
 * 2.鼠标移出移出，遮罩显示隐藏
 * 3.调整某个元素的大小，成比例
 * 	遮罩mask的尺寸		enlarge的尺寸
 * ------------- = --------------
 *  show盒子的尺寸		enlarge背景图的尺寸
 * 
 * enlarge的尺寸 = 遮罩mask的尺寸 * enlarge背景图的尺寸 / show盒子的尺寸	;
 * 
 * 4.移动
 */

function Enlarge(ele) {
	// 父元素
	this.ele = document.querySelector(ele);

	// 找到.show元素
	this.show = document.querySelector(ele + ">.show");

	// 找到mask遮罩层
	this.mask = document.querySelector(ele + ">.show>.mask");

	//找到放大镜enlarge
	this.enlarge = document.querySelector(ele + ">.enlarge");

	// 找到list
	this.list = document.querySelector(ele + ">.list");
	
	// 找到ul
	this.ulcontent = document.querySelector(ele + ">.list>ul");
	
	
    // 遮罩层尺寸
	this.mask_width = parseInt(window.getComputedStyle(this.mask).width);
	this.mask_height = parseInt(window.getComputedStyle(this.mask).height);
	
	// show盒子尺寸
	this.show_width = parseInt(window.getComputedStyle(this.show).width);
	this.show_height = parseInt(window.getComputedStyle(this.show).height);
	
	// enlarge的尺寸
	this.enlarge_width = parseInt(window.getComputedStyle(this.enlarge).width);
	this.enlarge_height = parseInt(window.getComputedStyle(this.enlarge).height);
	
	// enlarge的背景图尺寸
	const bg = window.getComputedStyle(this.enlarge).backgroundSize.split(" ");
	this.enlarge_bg_width = parseInt(bg[0]);
	this.enlarge_bg_height = parseInt(bg[1]);
}


/**
 * 鼠标移入移出，显示隐藏遮罩层mask
 */
Enlarge.prototype.overOut = function(){
	
	this.show.addEventListener("mouseenter",()=>{
		this.mask.classList.add("active");
		this.enlarge.classList.add("active");
	});
	
	this.show.addEventListener("mouseleave",()=>{
		this.mask.classList.remove("active");
		this.enlarge.classList.remove("active");
	});
	
}

/**
 * 设置比例
 *  遮罩mask的尺寸		enlarge的尺寸
 * ------------- = --------------
 *  show盒子的尺寸		enlarge背景图的尺寸
 * 
 * enlarge的尺寸 = 遮罩mask的尺寸 * enlarge背景图的尺寸 / show盒子的尺寸	;
 */
Enlarge.prototype.setScaleEnlarge = function(){
	
	const newEnlargeWidth = (this.mask_width * this.enlarge_bg_width / this.show_width);
	const newEnlargeHeight = (this.mask_height * this.enlarge_bg_height / this.show_height);

	// 设置enlarge的尺寸
	this.enlarge.style.width = newEnlargeWidth + "px";
	this.enlarge.style.height = newEnlargeHeight + "px";
	
	// 因为初始化时，是css中设置的enlarge的尺寸，这里被修改了，需要同步调整
	this.enlarge_width = newEnlargeWidth;
	this.enlarge_height = newEnlargeHeight;
	
}


/**
 * 设置比例
 *  遮罩mask的尺寸		enlarge的尺寸
 * ------------- = --------------
 *  show盒子的尺寸		enlarge背景图的尺寸
 * 
 * enlarge背景图的尺寸 = enlarge的尺寸 * show盒子的尺寸 / 遮罩mask的尺寸;
 */
Enlarge.prototype.setScaleBg = function(){
	// 设置背景图尺寸
	const bg_width = (this.enlarge_width * this.show_width / this.mask_width);
	const bg_height = (this.enlarge_height * this.show_height / this.mask_height);
	
	// 注意两个px之间有个空格隔开！
	this.enlarge.style.backgroundSize = bg_width + "px " + bg_height + "px";
	
	// 因为初始化时，是css中设置的enlarge的背景尺寸，这里被修改了，需要同步调整
	this.enlarge_bg_width = bg_width;
	this.enlarge_bg_height = bg_height;
}


/**
 *   遮罩层尺寸		enlarge尺寸
 * ------------ = --------------
 *  遮罩层移动距离           enlarge背景图移动距离（负数）
 * 
 * enlarge背景图移动距离  = enlarge尺寸  *  遮罩层移动距离  / 遮罩层尺寸
 */
Enlarge.prototype.move = function(){
	// 给show盒子绑定事件
	this.show.addEventListener("mousemove",e =>{
		e = e ||window.event;
		
		let x = e.offsetX - ( this.mask_width / 2 );
		let y = e.offsetY - ( this.mask_height / 2 );

		// 边界定位
		if(x <= 0){x = 0};
		if(y <= 0){y = 0};
		if(x >= (this.show_width - this.mask_width))  {x = this.show_width - this.mask_width};
		if(y >= (this.show_height - this.mask_height)) {y = this.show_height - this.mask_height};
		
		// 给mask赋值，设置距离
		this.mask.style.left = x + "px";
		this.mask.style.top = y + "px";
		
		
		// 背景图移动
		const moveX = this.enlarge_width * x / this.mask_width;
		const moveY = this.enlarge_height * y / this.mask_height;
		this.enlarge.style.backgroundPosition = `-${ moveX }px -${ moveY }px`;
	});
}

/**
 * 绑定点击事件
 */
Enlarge.prototype.bindEvent = function(){

	
	this.list.addEventListener("click",e => {
		e = e || window.event;
		const target = e.target || window.srcElement;
		if(target.nodeName === 'IMG'){
			for(let i = 0 ; i < this.ulcontent.children.length; i ++){
				this.ulcontent.children[i].classList.remove("active");
			}
			target.parentElement.classList.add("active");
			
			let normalPicPath = target.getAttribute("data-show");
			let bigPicPath = target.getAttribute("jqimg");
			console.log(normalPicPath)
			console.log(bigPicPath)
			
			// 设置图片
			this.show.firstElementChild.src = normalPicPath;
			this.enlarge.style.backgroundImage =  "url("+bigPicPath+")";
		}
	});
}



Enlarge.prototype.init = function(){
	this.overOut();
	this.setScaleBg();
	this.move();
	this.bindEvent();
}
